<template>
  <div class="select-major">
    <x-header>专业</x-header>
    <search
      v-model="value"
      position="absolute"
      auto-scroll-to-top
      top="46px"
      :auto-fixed="true"
      @on-focus="onFocus"
      @on-cancel="focus=false"
      @on-submit="onSubmit"
      ref="search"></search>
    <div :class="focus?'major-content on-focus':'major-content'">
      <div v-for="(item, i) in majorList" :key="i" class="major-alpha">
        <div class="major-title">{{item.key}}</div>
        <div class="major-item" v-for="(row, i) in item.values" :key="i" @click="onMajorSelect(row)">
          {{row}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import { XHeader, Search, XButton, Grid, GridItem, Card, Actionsheet, XInput, Group, GroupTitle, Selector, XImg } from 'vux';
import Avatar from 'vue-avatar';
const IndexStore = namespace('index');

@Component({
  components: { XHeader, Search, XButton, Grid, GridItem, GroupTitle, Card, Actionsheet, XInput, Group, Selector, XImg, Avatar }
})
export default class Home extends Vue {
  @IndexStore.Action getScools
  @IndexStore.Action getLogin
  @IndexStore.State schools
  @IndexStore.State schoolOptions
  focus = false
  value = ''
  majorList = [{
    key: 'A',
    values: [
      '管理学',
      '信息学'
    ]
  },
  {
    key: 'B',
    values: [
      '数学',
      '哲学'
    ]
  },
  {
    key: 'C',
    values: [
      '历史学',
      '地理学'
    ]
  }]
  onMajorSelect (value) {
    console.log(value)
  }
  onSubmit () {}
  onFocus () {
    this.$refs.search.setFocus()
    this.focus = true
  }
}
</script>
<style lang="less">
  .select-major {
    height: 100%;
    width: 100%;
    background: white;
    .major-content {
      margin: 10px;
      &.on-focus {
        margin-top: 54px;
      }
      .major-alpha {
        .major-title {
          padding: 5px 10px;
          background: #ebebeb;
          color: black;
        }
        .major-item {
          padding: 20px 10px;
          border-bottom: 1px solid #ebebeb;
        }
      }
    }
  }
</style>
